<template>
	<view class="zone">
		<!-- 灵石大逃杀 -->
		<Header title=" "></Header>

		<view class="main">
			<view class="bg">
				<image class="bg" src="http://image.qxgm.site/tdz/img/mozun/bg.png" mode="widthFix" />
			</view>
			<view class="minh">
				<view class="stat" v-show="gamestatus==0">
					<view class="t_word">
						<image class="smallren" src="http://image.qxgm.site/tdz/img/mozun/smallren.png" mode="widthFix"></image>
						<p>第{{phase}}期</p>
					</view>
					<view class="stat-b">
						<text>满人开局</text>
						<text>({{join_num}}/10)</text>
					</view>
				</view>
				<view class="stat2" v-show="gamestatus==1">
					<view class="t_word">
						<image class="smallren" src="http://image.qxgm.site/tdz/img/mozun/guawu.png" mode="widthFix"></image>
						<p>第{{phase}}期</p>
					</view>
					<view class="stat-b">
						<text>魔尊倒计时</text>
						<text>{{second}}s</text>
					</view>
				</view>
			</view>
			<!-- 中间选择人物部分 -->
			<view class="box">
				<view class="item" v-if="index<6" :class="['img' + (index+1)]" v-for="(item,index) in werewolf_log"
					:key="index" @click="choose(index)">
					<image :class="[stat == index  ?'active':'']" :src="stat == index ?'http://image.qxgm.site/tdz/img/mozun/m' + (index + 1) + '.png':'http://image.qxgm.site/tdz/img/mozun/a' + (index + 1) + '.png'"
						mode="widthFix" />
					<image class="fu" v-if="item.building_id == bang"
						src="http://img.cpgm.cc/xfmz/static/fuwolfkill/bang.gif" mode="widthFix" />
					<view class="posaword">{{name[index]}}</view>
					<view class="numbox">
						<view class="sjbox">
							<image class="ren1" src="http://image.qxgm.site/tdz/img/mozun/smallren.png" mode="widthFix" />
							<text>{{item.people_num}}人</text>
						</view>
						<view class="sjbox">
							<image class="ren2" src="http://image.qxgm.site/tdz/img/yaoyuan/mg-13.png" mode="widthFix" />
							<text>{{parseInt(item.invest_sum)}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<image class="logimg" @click="$p.navto('/pages/index/wolfkillalog')" src="http://image.qxgm.site/tdz/img/mozun/jilu.png"
					mode="heightFix" />
				<view class="sanjbox" v-if="invest_status != 0">
					你选择了「{{name[building_id-1]}}」
					<image src="http://image.qxgm.site/tdz/img/yaoyuan/mg-13.png" mode="widthFix" /> {{my_invest_sum}}
				</view>
				<view class="sanjbox" v-else>
					选择藏身处，魔尊要来了
				</view>
				<view class="botbtn button" @click="invest()">{{btntext}}</view>
				<image class="playimg" @click="$p.navto('/pages/index/wolfkillrule')" src="http://image.qxgm.site/tdz/img/mozun/wanfa.png"
					mode="heightFix" />
			</view>
		</view>
		<!-- 投入数量 -->
		<u-mask :show="show">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>投入数量</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="ysnum">投入的灵石越多，幸存成功后瓜分的灵石越多</p>
							<view class="flexcen">
								<view class="price" :class="[p_stat == index?'active2':'']"
									v-for="(item,index) in price" :key="index" @click="change(index)">
									{{item.money}}个
								</view>
							</view>
							<view class="title">您要投入多少灵石？</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="button tanapjaj" @click="touru()">确定</u-button>
							<view class="ahidaa">
								我的灵石： {{jade}}
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="show = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 击杀时间 -->
		<u-mask :show="show2" @click="show2=false" :custom-style="{background: 'rgba(0,0, 0, 0.8)'}">
			<view class="maskcen" @tap.stop>
				<view class="fightbox">
					<image class="mozunimg" src="http://image.qxgm.site/tdz/img/mozun/mozun.gif" mode="widthFix"></image>
					<view class="mozunitle">
						魔尊随机出现在山谷中…
					</view>
					<view class="epmx">
						点击空白区域关闭
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 成功瓜分 -->
		<u-mask :show="show3" :custom-style="{background: 'rgba(0, 0, 0, 0.9)'}">
			<view class="warp">
				<view class="maskbox mbg2">
                    <view class="p1">恭喜您逃过了魔尊的袭击</view>
					<view class="whitebg">
						<p class="ysnum2">幸存者瓜分<text>{{result_sum}}</text>灵石</p>
						<p class="black">魔尊攻击了「{{name[visiting_id -1]}}」，你逃过一劫</p>
						<view class="maskbtn">
							<view class="button btn3" @click="createnew()">确定</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 你被抓到 -->
		<u-mask :show="show4" :custom-style="{background: 'rgba(0, 0, 0, 0.9)'}">
			<view class="warp">
				<view class="maskbox mbg3">
                    <view class="p1">很遗憾 <br>你被魔尊袭击了</view>
					<view class="whitebg">
						<p class="white">魔尊攻击了「 <text class="red">{{name[visiting_id -1]}}</text> 」</p>
						<view class="maskbtn">
							<view class="button btn4" @click="createnew2()">再接再厉</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="xieyishow" z-index="999999">
			<view class="warp">
				<view class="mask_xy">
					<view class="x_title">参与活动风险提示</view>
					<view class="x_con">
						<p>1、对于平台不时发布的活动，用户理解并同意按自愿原则参与，在平台规则内自行承担因参与活动产生的任何风险及后果;</p>
						<p>2、禁止用户利用平台活动或规则参与或组织违法活动，平台对于因用户存在违法行为造成的损失免责;</p>
						<p>3、平台将定期或不定期安排人员监管用户行为，对于明显不合理的行为等异常情况进行审核;</p>
						<p>4、对用户任何涉嫌违法的行为，平台将加大监测，并鼓励知情者向客服投诉，平台对用户利用平台规则进行违法行为零容忍;</p>
						<p>5、为维护所有用户的权益，对于破坏平台规则，干扰其他用户的用户，平台视情况采取冻结账号等限制措施，涉嫌违法违规的用户依法提供合理解释及证明后，限制措施解除。</p>
					</view>
					<view class="button" @click="xieyishow = false">确定</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	var ds, animation

	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				show: false,
				xieyishow: false,
				price: [{
						id: 1,
						money: 1,
					},
					{
						id: 2,
						money: 10,
					},
					{
						id: 3,
						money: 100,
					},
					{
						id: 4,
						money: 1000,
					},
				],
				stat: -1,
				userinfo: '',
				gamestatus: 0, //0未开始1进行中2流局3已结束
				btntext: '投入', //按钮文字
				show2: false, //正在行动
				show3: false, //
				show4: false,
				name: ['泰山', '崇山', '峨眉', '昆仑', '长白', '华山'],
				userinfo: uni.getStorageSync('userinfo'),
				p_stat: 0, //默认选择投入的灵石
				sj: '1', //投入的灵石数量
				werewolf_log: [],
				werewolf_log2: [],
				werewolf_detail: '', //人物信息
				join_num: 0, //本期参与总人数
				invest_status: '', //是否投资
				last_result_msg: '', //最后结果
				visiting_id: '', //到访者id
				savesele: 1,
				last_result: '', //上一期数据
				timer: '',
				isconect: false,
				second: 30, //倒计时
				building_id: '',
				my_invest_sum: '',
				phase: '',
				result_sum: '',
				jade: '',
				allmoney: 0,
				checked: true,
				muteBgMusic: false, //静音
				chooseindex: 0,
				isclose: false,
				xieyishow: false,
				intiX: '',
				intiY: '',
				gametime: ['', 1000, 3000, 4000],
				bang: -1,
				resultid: '',
				top: "8.4%",
				left: '4.2%'
			};
		},
		onShow() {

		},
		onLoad() {
			this.getUserInfo()
			this.werewolf()
		},
		onUnload() {
			this.isclose = true
			uni.closeSocket()
			clearInterval(this.timer)
			this.timer = ''
		},
		methods: {
			createnew() {
				this.bang = -1
				this.werewolf2()
				this.getUserInfo()
				// this.anshow = false
				this.show2 = false;
				this.show3 = false
				this.visiting_id = ''
				this.chooseindex = 0
			},
			// 重置对局
			inita() {
				this.bang = -1
				animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease'
				})
				animation.translate(0, 0).step()
				this.animationData = animation.export();
				// this.anshow = false;
				this.show2 = false;
			},
			createnew2() {
				this.bang = -1
				this.werewolf2()
				this.getUserInfo()
				// this.anshow = false
				this.show2 = false;
				this.show4 = false
				this.visiting_id = ''
				this.chooseindex = 0
			},



			// 选择投入灵石的数量
			change(index) {
				this.p_stat = index
				this.sj = this.price[index].money
			},
			getOneFloat(num) { //保留一位小数
				let numMain = Number(num)
				let main = parseFloat((parseInt(numMain * 10) / 10).toFixed(1));
				return main
			},

			// 获取用户信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
				this.jade = res.data.lingshi
				this.allmoney = res.data.lingshi
			},

			opentips() {
				this.$u.toast('即将上线');
			},
			// 选择人物
			choose(index) {
				this.stat = index
				if (this.invest_status == 1) {
					if (this.werewolf_log2[index].building_id == this.building_id) {
						this.btntext = '投入'
					} else {
						this.btntext = '转投'
					}
				} else {
					this.btntext = '投入'
				}
			},

			// 投入
			invest() {
				if (this.stat == -1) {
					this.$u.toast('请选择一个角色')
				} else if (this.invest_status == 1 && this.werewolf_log[this.stat].building_id != this.building_id) {
					this.wolfchangeInvest(this.werewolf_log[this.stat])
				} else {
					this.show = true
				}
			},

			// 投入灵石
			touru() {
				if (this.sj <= 0) {
					this.$u.toast('灵石不足')
				} else {
					this.wolfinvest(this.werewolf_log[this.stat])
				}

			},

			// 玩家投入灵石
			async wolfinvest(item) {
                console.log(this.sj)
				let data = {
					type: "invest",
					data: {
						invest_num: this.sj,
						building_id: item.building_id,
						p_id: item.p_id
					}
				}
				data = JSON.stringify(data)
				// 传递参数给服务器
				uni.sendSocketMessage({
					data: data
				});
			},

			// 转投
			async wolfchangeInvest(item) {
				// console.log(item);
				let data = {
					type: 'change_invest',
					data: {
						p_id: item.p_id,
						new_building_id: item.building_id
					},
				}
				data = JSON.stringify(data)
				// 传递参数给服务器
				uni.sendSocketMessage({
					data: data
				});
			},

			// 获取首页信息 链接socket
			getinfo() {
                let token = uni.getStorageSync('token');
				// let token = '9f81885f86f0449ahttp://192.168.0.178:8000'
				this.socketTask = uni.connectSocket({
					url: 'ws://tdzh.cpgm8.cn:2389?token=' +token,
					method: 'GET',
					complete: (res) => {
						uni.onSocketOpen((res) => {
							this.issuccess = true
							this.heart() // xintiao
							// 监听服务器返回的数据
							uni.onSocketMessage((res) => {
								let d = JSON.parse(res.data)
                                console.log(d)
								switch (d.type) {
									case 'invest':
										this.$u.toast(d.msg)
										this.jade = d.data.jade
										this.my_invest_sum = d.data.my_invest_sum
										this.building_id = d.data.building_id
										this.invest_status = 1
										this.show = false //关闭弹窗
										break;

									case 'list':
										this.drawinfo(d)
										break;

									case 'error':
										this.$u.toast(d.msg)
										break;

									case 'change_invest':
										this.$u.toast(d.msg)
										this.building_id = d.data.building_id
										this.btntext = '投入'
										break;

									case 'game_start':
										this.kaiju(d);
										break;
									case 'werewolf_res':
										this.result(d)
										break;

								}
							});
						});
					},
					success: (res) => {

					},
				});


				// // 监听连接关闭 -
				this.socketTask.onClose((e) => {
					console.log('WebSocket连接关闭！');
					clearInterval(this.timer)
					this.timer = ''
					// if (!this.isclose) {
					// 	this.getinfo()
					// }
				})

				this.socketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					//进入重新连接
					this.getinfo()
				})
			},

			// 重新赋值最新数据
			drawinfo(data) {
				this.werewolf_log = data.data.list
				this.join_num = data.data.join_num
			},

			//心跳
			heart() {
				clearInterval(this.timer);
				this.timer = '';
				let msg = {
					type: "pong",
					data: {}
				}
                
				this.timer = setInterval(() => {
					// 传递参数给服务器
					uni.sendSocketMessage({
						data: JSON.stringify(msg)
					});
				}, 30000)
			},

			// 投入成功操作
			investsc(data) {
				this.$u.toast('投入成功')
				this.show = false
			},
			// 开始对局
			kaiju(d) {
				this.gamestatus = 1
				// 判断是否开局
				let currentTimestamp = new Date().getTime();
				let time = d.start_time
				let remainingTime = (time * 1000 + 30000) - currentTimestamp;
				var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
				this.second = remainingSeconds;
				// console.log(this.second);
				// 倒计时未结束时开始倒计时
				if (this.second > 0) {
					clearInterval(ds)
					ds = setInterval(() => {
						this.second--
						if (this.second <= 0) {
							this.second = 0
							clearInterval(ds)
						}
					}, 1000);
				} else {
					// 否则结束倒计时，开始揭露身份
					this.second = 0
				}
			},

			// 结束
			result(d) {
				this.resultid = d.data.visiting_id
				if (d.data.status == 2) {
					this.$u.toast('本局流局')
					this.werewolf2()
					this.getUserInfo()
				} else {
					// this.anshow = true
					this.show2 = true;
					setTimeout(() => {
						this.visiting_id = d.data.visiting_id
						this.result_sum = d.data.result_sum
						if (this.visiting_id == this.building_id) {
							this.show4 = true
						} else {
							this.show3 = true
						}
					}, 5000)
				}
			},


			// 获取反贼杀首页信息
			async werewolf() {
				let res = await this.$http.index.mozunlist()

				console.log(res);
				this.gamestatus = res.data.werewolf_detail.status //游戏
				this.werewolf_detail = res.data.werewolf_detail
				this.werewolf_log = res.data.werewolf_log //村民信息
				this.werewolf_log2 = res.data.werewolf_log //村民信息
				this.phase = res.data.werewolf_detail.phase
				this.join_num = res.data.join_num
				this.invest_status = res.data.invest_status
				this.last_result = res.data.last_result
				this.my_invest_sum = res.data.my_invest_sum
				// 获取我投资的房屋
				this.building_id = res.data.building_id
                console.log('building_id:'+this.building_id)
				// 判断是否开局
				if (this.werewolf_detail.status == 1) {

					let currentTimestamp = new Date().getTime();                                                                                            
					let time = res.data.werewolf_detail.start_time
					let remainingTime = (time * 1000 + 30000) - currentTimestamp;
					var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
					this.second = remainingSeconds;
					console.log(this.second);
					// console.log(this.second);
					// 倒计时未结束时开始倒计时

					if (this.second > 0) {
						clearInterval(ds)
						ds = setInterval(() => {
							this.second--
							if (this.second <= 0) {
								this.second = 0
								clearInterval(ds)
							}
						}, 1000);
					} else {
						// 否则结束倒计时，开始揭露身份
						this.second = 0
					}
				}
				if (this.werewolf_detail.status == 0) {}
				this.getinfo();
			},

			// 获取反贼杀首页信息
			async werewolf2() {
				let res = await this.$http.index.werewolf()
				// console.log(res);
				this.gamestatus = res.data.werewolf_detail.status //游戏
				this.werewolf_detail = res.data.werewolf_detail
				this.werewolf_log = res.data.werewolf_log //村民信息
				this.werewolf_log2 = res.data.werewolf_log //村民信息
				this.phase = res.data.werewolf_detail.phase
				this.join_num = res.data.join_num
				this.invest_status = res.data.invest_status
				this.last_result = res.data.last_result
				this.my_invest_sum = res.data.my_invest_sum
				// 获取我投资的房屋
				this.building_id = res.data.building_id ? res.data.building_id : 0
				// 判断是否开局
				if (this.werewolf_detail.status == 1) {
					let currentTimestamp = new Date().getTime();
					let time = res.data.werewolf_detail.start_time
					let remainingTime = (time * 1000 + 30000) - currentTimestamp;
					var remainingSeconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
					this.second = remainingSeconds;
					// console.log(this.second);
					// console.log(this.second);
					// 倒计时未结束时开始倒计时
					if (this.second > 0) {
						clearInterval(ds)
						ds = setInterval(() => {
							this.second--
							if (this.second <= 0) {
								this.second = 0
								clearInterval(ds)
							}
						}, 1000);
					} else {
						// 否则结束倒计时，开始揭露身份
						this.second = 0
					}
				}
				if (this.werewolf_detail.status == 0) {

				}
			},
		},
	}
</script>

<style lang="less">
	.zone {
		background: url('http://img.cpgm.cc/xfmz/static/fuwolfkill/bg.jpg'), #000;
		background-size: 100% auto;
		min-height: 100vh;
	}

	.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		text {
			color: #fff;
			font-weight: 600;
			font-size: 25px;
			margin-left: 5px;

			span {
				font-size: 12px;
				margin-left: 10px;
			}
		}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

	.main {

		position: relative;

		.bg {
			width: 100%;
			line-height: 0;

			image {
				width: 100%;
				margin-top: -70px;
			}
		}
	}

	.posa1 {
		position: absolute;
		top: 40px;
		right: 0;
		width: 54px;
		height: 27px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;

		text {
			color: #fff;
			font-size: 12px;
		}
	}


	.posa2 {
		position: absolute;
		top: 80px;
		right: 0;
		width: 54px;
		height: 27px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		text {
			color: #fff;
			font-size: 12px;
		}
	}

	.posa3 {
		position: absolute;
		top: 120px;
		right: 0;
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		text {
			color: #fff;
			font-size: 12px;
		}
	}

	.posa4 {
		position: absolute;
		top: 180px;
		right: 0;
		width: fit-content;
		display: flex;
		align-items: center;
		padding: 5px;
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 14px 0 0 14px;

		text {
			color: #fff;
			margin-right: 5px;
		}
	}



	.minh {
		position: absolute;
		top: 0%;
		left: 0px;
		width: 123px;
	}

	.stat {
		width: 100%;
		padding: 12px 5px 9px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 0px 5px 5px 0px;

		.t_word {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 12px;

			.smallren {
				width: 18px;
			}

			p {
				font-size: 12px;
				color: #FFFFFF;
				font-weight: normal;
				line-height: 12px;
				text-shadow: 0 1px 1px #000;
				margin-left: 5px;
			}
		}

	}

	.stat-b {
		margin-top: 5px;
		display: flex;
		align-items: center;

		text {
			font-size: 14px;
			font-weight: normal;
			color: #aaeb91;
			text-shadow: 0 1px 1px #000;
		}
	}

	.box {
		width: 100%;
		margin-top: 20px;

		.bg {
			width: 100%;
		}

		.img {
			position: absolute;
		}

		.item {
			position: absolute;
			width: 40%;
			display: flex;
			align-content: center;
			flex-direction: column;
			align-items: center;

			image {
				width: 90%;
			}
		}
	}

	.active {
		// border-radius: 5px;
		// background: url('http://img.cpgm.cc/xfmz/static/fuwolfkill/choose.png');
		// background-size: 100% 100%;
		// border-radius: 5px;
	}

	.img1 {
		top: 0%;
		right: 0%;
	}

	.img2 {
		left: 0%;
		top: 17%;
	}

	.img3 {
		right: 2%;
		top: 25%;
	}

	.img4 {
		left: 26%;
		top: 40%;
	}

	.img5 {
		left: 8%;
		top: 57%;
	}

	.img6 {
		right: 0%;
		top: 62%;
	}

	.bottom {
		position: absolute;
		bottom: 18px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 60px);
		max-width: 480px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.playimg {
			height: 50px;
		}

		.logimg {
			height: 50px;
		}

	}

	.btn {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 10px;
		height: 55px;
	}

	.left {
		width: 60%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.right {
		width: 39%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.line {
		width: 1px;
		height: 32px;
		background: rgba(0, 0, 0, 0.1);
	}

	.numbox {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		bottom: 0%;
		height: 25px;
		background: url(http://image.qxgm.site/tdz/img/mozun/heng.png) no-repeat;
		background-size: 100% 100%;



		.sjbox {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.ren1 {
				width: 18px;
			}

			.ren2 {
				width: 22px;
			}

			text {
				color: #fff;
				font-size: 12px;
				text-shadow: 0 1px 1px #000;
			}
		}
	}

	.line2 {
		width: 1px;
		background: #fff;
		height: 10px;
	}

	.botbtn {
		z-index: 9;
		width: 116px;
		height: 37px;
		font-weight: normal;
		font-size: 18px;
		color: #FFFFFF;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
		background-size: 100% 100%;
	}


	// 弹窗
	.maskbox {
		background: #fff;
		border-radius: 18px;
		padding: 15px 10px;

		p {
			text-align: center;
			margin-top: 10px;

			text {
				color: #239D4C;
				font-weight: 600;
			}
		}

		.m_meat {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 80px;
		}
	}

	.imgtit {
		width: 65px;
		height: 65px;
		background: #FFFFFF;
		border-radius: 50%;
		padding: 2px;
		position: relative;
		top: -30px;
		margin: 0 auto;
	}

	.in {
		background: linear-gradient(180deg, #FE9F0D 0%, #FED90D 100%);
		width: 100%;
		height: 100%;
		border-radius: 50%;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.mbg2 {
		padding-top: 100px;
		background: url(http://image.qxgm.site/tdz/img/tk/suibian2.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
		border-radius: 10px;
		margin-top: -15%;
		position: relative;
        .p1{
            position: absolute;
            left: 10px;
            top: 72px;
            color: #FFFFFF;
            font-size: 18px;
        }
	}

	.masktit {
		position: relative;
		left: 5%;
		width: 90%;
		margin: 0 auto;
	}

	.m_title2 {
		text {
			font-size: 25px !important;
			color: #000000 !important;
		}
	}

	.m_title3 {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 25px !important;
			color: #fff !important;
		}
	}

	.maskbtn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}


	.btn3 {
        width: 40%;
        height: 47px;
        display: block;
        font-size: 16px;
        text-align: center;
        font-weight: normal;
        color: #f9e5b6;
        line-height: 47px;
        text-shadow: 0 1px 1px #CB6500;
        background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
        background-size: 100% 100%;
	}

	.btn4 {
        width: 40%;
        height: 47px;
        display: block;
        font-size: 16px;
        text-align: center;
        font-weight: normal;
        color: #f9e5b6;
        line-height: 47px;
        text-shadow: 0 1px 1px #CB6500;
        background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
        background-size: 100% 100%;
	}

	.m_title2 {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 25px !important;
			color: #000000 !important;
		}
	}

	.whitebg {
		padding: 20px;
		border-radius: 9px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 60px;
			margin: 10px 0;
		}

		p {
			color: #696969;
			font-size: 18px;

			text {
				color: #000000;
			}
		}
	}

	.black {
		color: #000 !important;
		font-weight: 600;
	}




	.stat2 {
		position: relative;
		width: fit-content;
		padding: 12px 5px 9px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 0px 5px 5px 0px;

		.t_word {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 12px;

			.smallren {
				width: 18px;
			}

			p {
				font-size: 12px;
				color: #FFFFFF;
				font-weight: normal;
				line-height: 12px;
				text-shadow: 0 1px 1px #000;
				margin-left: 5px;
			}
		}
	}



	.sanjbox {
		position: absolute;
		top: -44px;
		left: 50%;
		width: 90%;
		transform: translateX(-50%);
		padding: 10px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #FFFFFF;
		font-weight: normal;
		text-shadow: 0 1px 1px #000;
		background: url(http://image.qxgm.site/tdz/img/mozun/tishi.png) no-repeat;
		background-size: 100% 100%;

		image {
			width: 18px;
		}
	}

	// .sanjbox::after {
	// 	content: "";
	// 	position: absolute;
	// 	bottom: -11px;
	// 	left: 10%;
	// 	z-index: 1;
	// 	width: 0px;
	// 	height: 0px;
	// 	border: 6px solid transparent;
	// 	border-top: 6px solid #fff;
	// }


	.mbg3 {
		background: url(http://image.qxgm.site/tdz/img/tk/suibian.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 18px;
		padding-top: 50px;
        .p1{
            color: #ffffff;
            text-align: center;
            margin-top: 60px;
            font-size: 22px;
        }
	}


	.posaword {
		position: absolute;
		top: 0;
		left: 4px;
		padding: 28px 5px;
		writing-mode: tb-rl;
		font-size: 14px;
		font-weight: normal;
		color: #FFFFFF;
		text-shadow: 0 1px 1px #000;
		background: url(http://image.qxgm.site/tdz/img/mozun/mc2.png) no-repeat;
		background-size: 100% 100%;
	}


	.checkgroup {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.explain2 {
		font-size: 12px;
	}

	.mask_xy {
		background: linear-gradient(180deg, #FBE4C1 0%, #F5D9B0 100%);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 18px;
		padding: 20px;

		.button {
			width: 80%;
			height: 54px;
			background: linear-gradient(180deg, #6B4AAF 0%, #5C3D98 100%);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(50, 19, 112, 1), inset 0px 2px 0px 0px rgba(187, 154, 255, 1);
			border-radius: 5px;
			color: #fff;
			margin: 0 auto;
		}
	}

	.x_title {
		color: #000000;
		font-size: 24px;
		font-weight: 600;
		text-align: center;
	}

	.x_con {
		font-size: 12px;
		color: #000000;
		padding: 10px;
		margin: 10px 0;
	}

	.yellow {
		color: #A737D7;
	}

	.title {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		text-align: center;
		margin: 10px 0;
	}

	.closed {
		width: 30px;
		position: absolute;
		top: 15px;
		right: 15px;
	}


	.jihuop {
		padding: 0 7%;

		.ysnum {
			text-align: center;
			margin-top: 10px;
		}

		.flexcen {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10px;

			.active2 {
				color: #333333;
				background: url(http://image.qxgm.site/tdz/img/tixian/mg-01.png) no-repeat !important;
				background-size: 100% 100% !important;
			}

			.price {
				width: 32%;
				text-align: center;
				background: url(http://image.qxgm.site/tdz/img/tixian/mg-02.png) no-repeat;
				background-size: 100% 100%;
				font-size: 15px;
				font-weight: 400;
				height: 35px;
				color: #996666;
				line-height: 35px;
				margin-bottom: 3px;
			}


		}
	}

	.ahidaa {
		font-size: 12px;
		color: #666;
		line-height: 12px;
		text-align: center;
		margin-top: 10px;
	}

	.tanapjaj {
		display: block;
		margin: 10px auto 0;
		width: 116px;
		height: 37px;
		font-weight: normal;
		font-size: 18px;
		color: #FFFFFF;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
		background-size: 100% 100%;
	}


	.maskcen {
		width: 100%;
		position: relative;
		left: 0;
		top: 50%;
		transform: translateY(-50%);

		.mozunimg {
			width: 100%;
		}

		.mozunitle {
			font-size: 20px;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 0 1px 1px #000;
			text-align: center;
		}

		.epmx {
			font-weight: normal;
			font-size: 13px;
			color: #FFFFFF;
			opacity: 0.5;
			text-align: center;
			margin-top: 3vh;
		}





	}




	.fight {
		width: 98%;
	}

	@keyframes shake {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.15);
		}
	}

	.shakecs {
		animation: shake 0.6s linear infinite;
	}

	@keyframes updown {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(10px);
		}
	}

	.upd {
		animation: updown 1.5s linear infinite;
	}




	.prepoty {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
		font-family: 'fm1';
		font-size: 12px;
		margin-top: 20px;

		image {
			width: 20px;
			margin: 0 4px;
		}
	}



	.masktop {
		display: flex;
		align-items: flex-start;

		image {
			width: 50%;
		}
	}


	.ysnum2 {
		font-size: 14px;
		color: #000 !important;

		text {
			font-size: 30px;
			font-family: 'fm1';
			font-weight: 600;
            color: #FF33FF;
		}
	}

	.yihan {
		width: 90% !important;
		position: relative;
		left: 5%;

	}

	.red {
		color: #FF0000 !important;
	}

	.choosebox {
		background: #A400FF !important;
		border-radius: 3px;
		color: #fff !important;
	}





	.maskss {

		image {
			position: absolute;
			// top: 8.4%;
			// left: 4.2%;
			width: 26%;
		}
	}



	.fu {
		position: absolute;
		top: 0;
		width: 140% !important;
	}



	.vis {
		visibility: hidden;
	}
</style>